<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js v-on指令练习</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/v-on.css">
</head>
<body>
    <div id="app" class="container">
        <header>
            <h1>Vue.js v-on指令练习</h1>
            <p class="subtitle">掌握事件处理、表单交互和用户反馈</p>
        </header>
        
        <div class="exercises-container">
            <!-- 练习1：计数器组件 -->
            <div class="exercise-card">
                <h2 class="exercise-title">练习1：计数器组件</h2>
                <div class="counter-display" :class="{ highlight: countChanged }">{{ count }}</div>
                
                <div class="counter-buttons">
                    <button class="btn btn-primary" @click="increment">增加</button>
                    <button class="btn btn-danger" @click="decrement">减少</button>
                    <button class="btn btn-success" @click="reset">重置</button>
                </div>
                
                <p class="keyboard-hint">提示：按↑键增加，按↓键减少，按R键重置</p>
            </div>
            
            <!-- 练习2：表单交互增强 -->
            <div class="exercise-card">
                <h2 class="exercise-title">练习2：表单交互增强</h2>
                
                <div class="form-group">
                    <label for="search">实时搜索</label>
                    <input 
                        id="search" 
                        type="text" 
                        v-model="searchQuery" 
                        @input="performSearch"
                        @focus="focusInput('search')"
                        placeholder="输入关键词进行搜索...">
                </div>
                
                <div class="search-results" v-if="searchResults.length > 0">
                    <div 
                        v-for="result in searchResults" 
                        :key="result.id" 
                        class="search-item"
                        @click="selectResult(result)">
                        {{ result.text }}
                    </div>
                </div>
                <div class="search-results" v-else-if="searchQuery && searchResults.length === 0">
                    <div class="search-item">未找到匹配的结果</div>
                </div>
                
                <div class="form-group">
                    <label for="message">消息</label>
                    <textarea 
                        id="message" 
                        v-model="message" 
                        rows="3"
                        @focus="focusInput('message')"
                        placeholder="输入您的消息..."></textarea>
                </div>
                
                <div class="form-buttons">
                    <button class="btn btn-primary" @click="submitForm">提交</button>
                    <button class="btn btn-danger" @click="resetForm">重置</button>
                </div>
            </div>
            
            <!-- 练习3：用户交互反馈 -->
            <div class="exercise-card">
                <h2 class="exercise-title">练习3：用户交互反馈</h2>
                
                <p>鼠标悬停效果：</p>
                <div 
                    class="hover-box" 
                    @mouseenter="hoverActive = true" 
                    @mouseleave="hoverActive = false"
                    :class="{ active: hoverActive }">
                    {{ hoverActive ? '鼠标悬停中...' : '将鼠标悬停在这里' }}
                </div>
                
                <p>点击动画反馈：</p>
                <div 
                    class="click-box" 
                    @click="animateClick"
                    :style="{ transform: clickScale }">
                    点击我试试
                </div>
                
                <p>自定义工具提示：</p>
                <div class="tooltip-container">
                    <div class="tooltip-trigger">悬停查看工具提示</div>
                    <div class="tooltip">这是一个自定义工具提示！</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
    <script>
        new Vue({
            el: '#app',
            data: {
                // 练习1数据
                count: 0,
                countChanged: false,
                
                // 练习2数据
                searchQuery: '',
                searchResults: [],
                message: '',
                sampleData: [
                    { id: 1, text: 'Vue.js 教程' },
                    { id: 2, text: 'JavaScript 基础' },
                    { id: 3, text: 'CSS 动画效果' },
                    { id: 4, text: 'HTML5 新特性' },
                    { id: 5, text: '前端开发工具' },
                    { id: 6, text: '响应式网页设计' },
                    { id: 7, text: 'Web 性能优化' },
                    { id: 8, text: '移动端开发' }
                ],
                
                // 练习3数据
                hoverActive: false,
                clickScale: 'scale(1)'
            },
            methods: {
                // 点击增加count值
                increment() {
                    this.count++;
                    this.highlightCount();
                },
                // 点击减少count值
                decrement() {
                    this.count--;
                    this.highlightCount();
                },
                // 重置count值
                reset() {
                    this.count = 0;
                    this.highlightCount();
                },
                highlightCount() {
                    this.countChanged = true;
                    setTimeout(() => {
                        this.countChanged = false;
                    }, 300);
                },
                handleKeydown(event) {
                    switch(event.key) {
                        case 'ArrowUp':
                            this.increment();
                            break;
                        case 'ArrowDown':
                            this.decrement();
                            break;
                        case 'r':
                        case 'R':
                            this.reset();
                            break;
                    }
                },
                
                // 练习2方法
                performSearch() {
                    if (this.searchQuery.trim() === '') {
                        this.searchResults = [];
                        return;
                    }
                    
                    const query = this.searchQuery.toLowerCase();
                    this.searchResults = this.sampleData.filter(item => 
                        item.text.toLowerCase().includes(query)
                    );
                },
                focusInput(inputName) {
                    console.log(`输入框 ${inputName} 获得焦点`);
                },
                selectResult(result) {
                    this.searchQuery = result.text;
                    this.searchResults = [];
                },
                submitForm() {
                    if (this.message.trim() === '') {
                        alert('请输入消息内容！');
                        return;
                    }
                    
                    alert(`表单提交成功！\n\n消息内容：${this.message}`);
                },
                resetForm() {
                    this.searchQuery = '';
                    this.searchResults = [];
                    this.message = '';
                },
                
                // 练习3方法
                animateClick() {
                    this.clickScale = 'scale(0.9)';
                    setTimeout(() => {
                        this.clickScale = 'scale(1)';
                    }, 200);
                }
            },
            mounted() {
                // 添加键盘事件监听
                document.addEventListener('keydown', this.handleKeydown);
            },
            beforeDestroy() {
                // 移除键盘事件监听
                document.removeEventListener('keydown', this.handleKeydown);
            }
        });
    </script>